<template>
  <Card>
    <div id="outMaterial">
      <div class="title">
        <Icon size="18" type="md-list-box"/>
        考勤统计编辑
        <Divider/>
      </div>
      <div :loading="loadingList" class="from">
        <Form ref="form" :label-width="170" :model="form" :rules="formValidate" inline>
          <FormItem label="车牌号：" prop="license_plate_num" style="width:49%;">
            <Input v-model="form.license_plate_num" placeholder="请输入车牌号"/>
          </FormItem>
          <FormItem label="姓名：" prop="license_plate_num" style="width:49%;">
            <Input v-model="form.driver" placeholder="请输入姓名"/>
          </FormItem>
          <Form-item label="线路：" prop="line" style="width:49%;">
            <Input v-model="form.line" placeholder/>
          </Form-item>
          <div v-for="(ite, index) in monthDaily">
            <Form-item :label="ite.date_t+'号'" :prop="'date_'+index" style="width:49%;">
              <Input v-model="ite.date_m" placeholder value="0" @on-change="changeTotal"></Input>
            </Form-item>
          </div>
          <FormItem label="小计：" style="width:49%;">
            <Input v-model="form.total_d" placeholder="请输入小计" readonly/>
          </FormItem>
          <FormItem label="加班：" style="width:49%;">
            <Input v-model="form.monthly_cost" placeholder="请输入加班"/>
          </FormItem>
          <FormItem label="修车：" style="width:49%;">
            <Input v-model="form.m_air_yihua" placeholder="请输入修车"/>
          </FormItem>
          <FormItem label="停运：" style="width:49%;">
            <Input v-model="form.repair" placeholder="请输入停运"/>
          </FormItem>
          <FormItem label="晚上加班：" style="width:49%;">
            <Input v-model="form.tire" placeholder="请输入晚上加班"/>
          </FormItem>
          <FormItem label="备注：" style="width:49%;">
            <Input v-model="form.remark" placeholder="请输入备注"/>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button :loading="loading" @click="cancel('form')">重置</Button>
          <Button
            :loading="submitLoading"
            style="margin-left:8px"
            type="primary"
            @click="handleSubmit('form')"
          >保存
          </Button>
        </div>
      </div>
    </div>
  </Card>
</template>
<script>
import {attendanceAccountingInfo, editAttendanceAccounting} from '../../api/attendance'

export default {
  data() {
    return {
      submitLoading: false,
      loading: false,
      loadingList: false,
      form: {},
      formValidate: {},
      monthDaily: []
    }
  },
  watch: {
    $route: 'getAttendanceAccountingInfo'
  },
  mounted() {
    this.getAttendanceAccountingInfo()
  },
  methods: {
    cancel() {
      this.form = {}
    },
    changeTotal() {
      let total = 0
      this.monthDaily.forEach(element => {
        total = parseFloat(total) + parseFloat(element.date_m)
      })
      this.form.total_d = total
    },
    getAttendanceAccountingInfo() {
      if (this.$route.params.id) {
        this.loadingList = true
        attendanceAccountingInfo({id: this.$route.params.id}).then(res => {
          this.loadingList = false
          // console.log(eval('(' + res.data.result.monthDaily + ')'));
          this.form = res.data.result
          this.monthDaily = eval('(' + res.data.result.monthDaily + ')')
        })
      }
    },
    handleSubmit(name) {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.monthDaily = this.monthDaily
          this.form.id = this.$route.params.id
          this.submitLoading = true
          editAttendanceAccounting(this.form).then(res => {
            this.submitLoading = false
            if (res.data) {
              this.$Message.success(res.message)
              this.$store.commit('closeTag', 'editAttendanceAccounting')
              this.$router.push({
                name: 'attendanceAccounting'
              })
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>
<style>
.ivu-row .ivu-col .ivu-form-item {
  width: 100%;
}
</style>
